<template>
  <div class="login-container flex">
    <img src="../../../public/img/login-left.png" class="login-left" />
    <div class="login-right flex flex-col">
      <div class="fz-20 text-center text-bold">欢迎登录智能化在线教学支持服务平台大数据分析系统</div>
      <div class="text-center mb-20">WELCOME</div>
      <el-form :model="form"  :rules="rules" ref="ruleForm">
        <el-form-item class="login-input flex" prop="name">
          <el-icon class="flex1"><User /></el-icon>
          <el-input
            class="login-input-right"
            v-model="form.username"
            placeholder="请输入账号"
          />
        </el-form-item>
        <el-form-item class="login-input flex" prop="password">
          <el-icon class="flex1"><Lock /></el-icon>
          <el-input
            class="login-input-right"
            v-model="form.password"
            placeholder="请输入密码"
          />
        </el-form-item>
        <el-form-item>
            <el-checkbox class="login-remember mb-10" v-model="remember" label="记住密码" />
        </el-form-item>
        <el-form-item>
            <el-button class="login-btn w-p-100" type="primary" @click="onSubmit()">立即登录</el-button>
        </el-form-item>
      </el-form>

    </div>
  </div>
</template>

<script setup lang="ts">
// import router from "@/router";
import { ref, reactive } from 'vue';
import userApi from '@/api/userApi';
import { ElMessage } from 'element-plus';
const ruleForm = ref(null)
const form = reactive({
  username: "",
  password: "",
});
const remember = ref(false)

const rules = {
    name: [
    { required: true, message: '请输入账号', trigger: 'blur'}
  ],
  password: [
    { required: true, message: '请输入密码', trigger: 'blur'}
  ],
}
const onSubmit = () => {
  userApi.LoginByUsername(form.username, form.password).then(res => {
    if (res) {
      console.log(res);
      // 存储 token 和用户信息到 localStorage
      // localStorage.setItem("token", res.data.token);
      // localStorage.setItem("user", JSON.stringify(res.data.user));
      // 使用 Element Plus 的 ElMessage 显示登录成功的消息
      ElMessage({
        message: '登录成功',
        type: 'success',
        duration: 3000  // 消息显示时长为 3 秒
      });
      // 跳转到首页
      window.location.href = "/teacher";
    } else {
      console.log(res);
      ElMessage({

        message:'未知错误',
        type: 'error',
        duration: 3000  // 消息显示时长为 3 秒
      });
    }
  }).catch(error => {
    console.error("Login error:", error); // 打印错误信息
    ElMessage.error({
      message: error.message || '登录失败，请检查网络或联系管理员',
      duration: 3000  // 消息显示时长为 3 秒
    });
  });
}
</script>

<style scoped>
.login-container {
  width: 100vw;
  height: 100vh;
  background: url("../../../public/img/login.png") no-repeat;
  background-size: cover;
}
.login-left {
  width: 58%;
  height: 100%;
}
.login-right {
  width: 25%;
  height: 56%;
  background-color: #fff;
  margin: auto;
  border-radius: 10px;
  box-shadow: #b3d2fb 1px 1px 15px 1px;
  padding: 40px 30px;
}
.login-input {
    height:50px;
  border: 1px solid #b3d2fb;
  border-radius: 5px;
  background: rgba(231, 241, 253, 0.4);
}
.login-input-right {
  width: 80%;
  height: 60%;
  border-left: 1px solid #ccc;
}
.login-remember {
    font-size: 12px;
}
.login-btn {
    height: 40px;
}
</style>
<style>
.login-input-right .el-input__wrapper {
  border: none !important;
  box-shadow: none !important;
  background: transparent;
}
.login-remember .el-checkbox__label {
    font-size: 12px;
    color:#aaa;
}
</style>
